<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .el-table .warning-row {
            background: white;
        }

        .el-table .success-row {
            background: whitesmoke;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <el-table
                :data="tableData"
                height="400"
                border
                :row-class-name="tableRowClassdeparture">
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="departure"
                    label="出发地"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="arrival"
                    label="目的地"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="flightNumber"
                    label="航班号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="airLine"
                    label="航空公司"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                    width="180">
            </el-table-column>
        </el-table>
    </template>



</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    var app = new Vue({
        el:'#app',
        methods: {
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            tableRowClassdeparture({row, rowIndex}) {
                if (rowIndex%2 === 0) {
                    return 'warning-row';
                } else if (rowIndex%2 !== 0) {
                    return 'success-row';
                }
                return '';
            }
        },
        data() {
            return {
                tableData: [{
                    date: '2016-05-03',
                    departure: '重庆',
                    arrival: '北京',
                    price:50,
                    flightNumber:'SC1314',
                    airLine:'四川航空'
                },
                {
                    date: '2016-05-03',
                    departure: '重庆',
                    arrival: '北京',
                    price:50,
                    flightNumber:'SC1314',
                    airLine:'四川航空'
                }]
            }
        }
    })
</script>

</body>
</html>